<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>el和data的两种写法</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        Hello {{name}}
    </div>

</body>
<script type="text/javascript">
  // new Vue({
    // el的第一种写法
  //     el: "#root",
    // data的对象式写法
  //     data: {
  //         name: "jack"
  //     }
  // })

  /* el的第二种写法
  var x =new Vue({
      data: {//data的对象式写法
          name: "jack"
      }
  })
  x.$mount('#root')*/

  // data的函数式写法
  var x =new Vue({
    // data:function(){
    //     console.log('####',this)
    //     return{
    //         name:"tom"
    //     }
    // }
    // 简写
    data(){
        console.log("####",this)
        return{
            name:"tom"
        }
    }
  })
  x.$mount('#root')
</script>
</html>